.chat-main{
    position     : relative;
    font-size    : 0;
    margin-bottom: 10px;
    padding-left : 60px;
    min-height   : 68px;
}

.chat-user {
    position: absolute;
    left    : 3px;
}

.chat-user cite {
    position   : absolute;
    left       : 60px;
    top        : -2px;
    width      : 500px;
    width: 300px;
    // width: 100%;
    line-height: 24px;
    font-size  : 12px;
    white-space: nowrap;
    color      : #999;
    text-align : left;
    font-style : normal;
}

.chat-user>img, .text-photo>img {
    width        : 40px;
    height       : 40px;
    border-radius: 100%;
    transform    : translateY(10px);
}

.chat-user .text-photo {
    display         : block;
    background-color: #328af4;
    color           : #fff;
    text-align      : center;
    line-height     : 40px;
}

.chat-user cite i {
    padding-left: 15px;
    font-style  : normal;
}

.chat-text {
    position        : relative;
    line-height     : 22px;
    margin-top      : 25px;
    padding         : 8px 15px;
    background-color: #e2e2e2;
    border-radius   : 3px;
    color           : #333;
    word-break      : break-all;
    max-width       : 462px\9;
}

.chat-text::after {
    content     : '';
    position    : absolute;
    left        : -10px;
    top         : 13px;
    width       : 0;
    height      : 0;
    border-style: solid dashed dashed;
    border-color: #e2e2e2 transparent transparent;
    overflow    : hidden;
    border-width: 10px;
}

.chat-text,
.chat-user {
    display       : inline-block;
    *display      : inline;
    *zoom         : 1;
    vertical-align: top;
    font-size     : 14px;
}

/** 消息右侧展示 */
.chat-mine {
    text-align   : right;
    padding-left : 0;
    padding-right: 60px;
}

.chat-mine .chat-user {
    left : auto;
    right: 3px;
}

.chat-mine .chat-user cite {
    left      : auto;
    right     : 60px;
    text-align: right;
}

.chat-mine .chat-user cite i {
    padding-left : 0;
    padding-right: 5px;
}

.chat-mine .chat-text {
    margin-left: 0;
    text-align : left;
}

.chat-mine .chat-text:after {
    left : auto;
    right: -10px;
}